<!-- index.html -->
<!-- Hello World sapui5 -->

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  
  <title>Document</title>

  <script
    id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme='sap_fiori_3'
    data-sap-ui-libs='sap.m'
    data-sap-ui-xx-waitForTheme="true"
    data-sap-ui-preload="async"
    data-sap-ui-compatVersion="edge"
    data-sap-ui-resourceroots='{
      "zui_tmc": "./"
    }'
  >  
  </script>

  <script>
    // Присоединяем к событию Init "Загрузка библиотеки" функцию обработчик.
    sap.ui.getCore().attachInit(function () {
    
      // Создаём контролы sapui5 и размещаем их в тегах с id=content*.
      new sap.m.Text({text: "Hello World!"}).placeAt("content1");

      let oLabel = new sap.m.Label().setText("Привет Мир!").placeAt("content2");

      let oButton = new sap.m.Button();
      oButton.setText("OK");
      oButton.placeAt("content3");
      
      // Кнопки oButton подключаем обработчик события "Нажатие кнопки". 
      oButton.attachPress(function(){
        sap.m.MessageToast.show("Hello, world!");
      });

      // // Подключаемся к серверу и создаём JSON модель.
      // var oModel = new sap.ui.model.json.JSONModel(
      //   "http://services.odata.org/Northwind/Northwind.svc/Employees?$format=json",
      //   true
      // );
      // // Устанавливаем модель глобально для всего приложения, будет доступна по имени ZLIST1.
      // sap.ui.getCore().setModel(oModel,'ZLIST1');
      // Список.
      // var oList = new sap.m.List({
      //   id: "ListId",
      //   mode: sap.m.ListMode.SingleSelect
      // });      
      // var oItemTemplate = new sap.m.StandardListItem({
      //   id:           "sList",
      //   title:        "{ZLIST1>LastName}",
      //   description:  "{ZLIST1>EmployeeID}"
      // });      
      // oList.bindAggregation("items","ZLIST1>/value",oItemTemplate);

      // // Подключаемся к серверу и создаём OData модель версии 2 (данные принимаем в json).
      // var oModel_D = new sap.ui.model.odata.v2.ODataModel(
      //   "https://services.odata.org/Northwind/Northwind.svc/", true
      // );  
      
      // // Список.
      // var oList = new sap.m.List({
      //   id: "ListId",
      //   //mode: sap.m.ListMode.SingleSelect
      // });
      // // Описание структуры списка.
      // var oListItem = new sap.m.StandardListItem({
      //   title:        "{CompanyName}",
      //   description:  "{City}",
      //   press:        onListPress,
      //   type:         "Navigation"     
      // });
      // // Списку присоединяем структуру и связываем с таблицей /Customers модели OData.
      // oList.bindItems("/Customers", oListItem, null, null);
      // // Присваиваем модель списку.
      // oList.setModel(oModel_D);
      // Обработка нажатия на строку списка.
      // function onListPress(oEvent){
      //   console.log(oEvent.oSource.getBindingContext());
      // }

      // Подключаемся к серверу и создаём OData модель версии 4.
      var oModel = new sap.ui.model.odata.v4.ODataModel({
        groupId: "$direct",
        synchronizationMode: "None",
        serviceUrl: "http://services.odata.org/TripPinRESTierService/",
      });
      // Устанавливаем модель глобально для всего приложения, будет доступна по имени ZLIST1.
      //sap.ui.getCore().setModel(oModel,'ZLIST1');
      
      // Создаём список.
      var oList = new sap.m.List({
        includeItemInSelection: true,
        mode: "SingleSelect",
        width: "250px",
        select: function(oEvent) {
          var listBindingContext = oEvent.getParameter("listItem").getBindingContext("ZLIST1");
          //console.log(oEvent.oSource.getBindingContext());
          console.log(listBindingContext);          
        }
      });
      // Устанавливаем модель списку, модель будет доступна по имени ZLIST1.
      oList.setModel(oModel,'ZLIST1');
      
      // Списку присоединяем описание структуры и связываем с таблицей /People модели OData.
      oList.bindItems({
        path: "ZLIST1>/People",
        template: new sap.m.StandardListItem({
          title: "{ZLIST1>FirstName} {ZLIST1>LastName}",
          description: {path: "ZLIST1>UserName"}
        })
      });
      
      oList.placeAt("content4");
      
      // Создаём модель для JSON данных.
      var oModel2 = new sap.ui.model.json.JSONModel();
      // Подключаемся к серверу и загружаем JSON модель.
      oModel2.loadData("https://serv/sap/opu/odata/sap/ZMM_TEST1_SRV/Z_STAFFSet?$format=json")
        .then(res=>{
          // Устанавливаем модель глобально для всего приложения, будет доступна по имени ZLIST1.
          sap.ui.getCore().setModel(oModel2,'ZLIST1');
          // Создаём список.
          var oList2 = new sap.m.List({
            id: "myList2",
            mode: sap.m.ListMode.SingleSelect
          });
          // Списку устанавливаем глобальную модель ZLIST2.
          oList2.setModel(sap.ui.getCore().getModel("ZLIST2"));
          
          // Присоединяем списку данные модели, расположенные в ветке /d/results/
          oList2.bindItems("/d/results/",
            new sap.m.StandardListItem({ 
              title:"{FirstName}"
            })
          );

          oList2.placeAt("content5");
        });      

    });

  </script>

</head>
<body class="sapui5">

  <div id="content1"></div>
  <div id="content2"></div>
  <div id="content3"></div>
  <div id="content4"></div>
  <div id="content5"></div>

</body>
</html>
